<template>
    <div>
        <el-row>
            <el-col :span="15">
                <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                    <el-form-item label="出发时间">
                        <el-date-picker
                            v-model="queryMap.departureTime"
                            type="date"
                            placeholder="出发时间"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            style="width: 150px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="到达时间">
                        <el-date-picker
                            v-model="queryMap.arrivalTime"
                            type="date"
                            placeholder="到达时间"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            style="width: 150px">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="queryTravelInfo">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="addTravelInfo">新增</el-button>
                <!--<el-button type="primary" @click="updateTravelInfo">修改</el-button>-->
                <!--<el-button type="primary" @click="delTravelInfo">删除</el-button>-->
            </el-col>
        </el-row>

        <el-table
            ref="multipleTable"
            :data="travelInfoData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <!--<el-table-column-->
            <!--    type="selection"-->
            <!--    width="55">-->
            <!--</el-table-column>-->
            <el-table-column
                prop="id"
                label="差旅id"
                width="80">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                prop="empno"
                label="员工工号"
                width="80">
                <template slot-scope="scope">{{ scope.row.empno }}</template>
            </el-table-column>
            <el-table-column
                prop="departureTime"
                label="出发时间"
                width="160">
                <template slot-scope="scope">{{ scope.row.departureTime }}</template>
            </el-table-column>
            <el-table-column
                prop="arrivalTime"
                label="到达时间"
                width="160">
                <template slot-scope="scope">{{ scope.row.arrivalTime }}</template>
            </el-table-column>
            <el-table-column
                prop="day"
                label="出差天数"
                width="100">
                <template slot-scope="scope">{{ scope.row.day }}</template>
            </el-table-column>
            <el-table-column
                prop="instruction"
                label="出差说明"
                width="120">
                <template slot-scope="scope">{{ scope.row.instruction }}</template>
            </el-table-column>
            <el-table-column
                prop="reimbursementTime"
                label="报销时间"
                width="160">
                <template slot-scope="scope">{{ scope.row.reimbursementTime }}</template>
            </el-table-column>
            <el-table-column
                prop="subsidy"
                label="补助金额"
                width="100">
                <template slot-scope="scope">{{ scope.row.subsidy }}</template>
            </el-table-column>
            <el-table-column
                prop="reimbursement"
                label="报销总额"
                width="100">
                <template slot-scope="scope">{{ scope.row.reimbursement }}</template>
            </el-table-column>
        </el-table>

        <el-pagination
            background
            @size-change="getSize"
            @current-change="getCurrent"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="queryMap.page"
            :page-size="queryMap.limit"
            :total="total">
        </el-pagination>

        <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
            <el-form ref="eForm" :model="travelInfoForm" label-position="right">
                <el-form-item label="差旅id" :label-width="formLabelWidth" v-show="isIdShow">
                    <el-input v-model="travelInfoForm.id" autocomplete="off" style="width: 400px"
                              :disabled="isTravelInfoDisabled"></el-input>
                </el-form-item>
                <el-form-item label="员工工号" :label-width="formLabelWidth" prop="empno">
                    <el-input v-model="travelInfoForm.empno" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="出发时间" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="travelInfoForm.departureTime"
                        type="datetime"
                        placeholder="选择日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 400px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="到达时间" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="travelInfoForm.arrivalTime"
                        type="datetime"
                        placeholder="选择日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 400px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="出差天数" :label-width="formLabelWidth" prop="arrivalTime">
                    <el-input v-model="travelInfoForm.day" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="出差说明" :label-width="formLabelWidth" prop="day">
                    <el-input v-model="travelInfoForm.instruction" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="报销时间" :label-width="formLabelWidth" prop="reimbursementTime">
                    <el-date-picker
                        v-model="travelInfoForm.reimbursementTime"
                        type="datetime"
                        placeholder="选择日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 400px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="补助金额" :label-width="formLabelWidth" prop="subsidy">
                    <el-input v-model="travelInfoForm.subsidy" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="报销总额" :label-width="formLabelWidth" prop="reimbursement">
                    <el-input v-model="travelInfoForm.reimbursement" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTravelInfo">确 定</el-button>
                <el-button @click="resetForm">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "TravelInfoList",
    components: {},
    data() {
        return {
            queryMap: {
                departureTime: '',
                arrivalTime: '',
                page: 1,
                limit: 10,
                empno: 0
            },
            travelInfoData: [],
            total: 0,
            formTitle: "新增差旅信息",
            dialogFormVisible: false,
            formLabelWidth: '120px',
            travelInfoForm: {
                id: 0,
                empno: 0,
                departureTime: '',
                arrivalTime: '',
                day: 0,
                instruction: '',
                reimbursementTime: '',
                subsidy: 0,
                reimbursement: 0
            },
            isIdShow: false,
            isTravelInfoDisabled: false,
            checkData: []
        }
    },
    computed: {},
    watch: {},
    methods: {
        queryTravelInfo() {
            this.queryMap.page = 1
            this.getTravelInfoData()
        },
        addTravelInfo() {
            this.$router.push('/addTravelInfo')
        },
        updateTravelInfo() {
            if (this.checkData.length === 0) {
                this.$message.warning("请选择要修改的员工信息")
                return
            }
            if (this.checkData.length > 1) {
                this.$message.warning("只能选择一条员工信息进行修改")
                return
            }

            let id = this.checkData[0].id
            this.$http.post("/travelInfo/getTravelInfo/" + id).then(res => {
                this.travelInfoForm = res.data
                this.dialogFormVisible = true
                this.formTitle = "修改差旅信息"
            })


        },
        delTravelInfo() {
            if (this.checkData.length === 0) {
                this.$message.warning("请选择要删除的数据")
                return
            }
            this.$confirm("确定要删除选中的数据吗?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                let ids = []
                for (let i = 0; i < this.checkData.length; i++) {
                    ids[i] = this.checkData[i].id
                }
                this.$http.post("/travelInfo/delTravelInfo/", ids).then(res => {
                    if (res.data === 'success') {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        this.getTravelInfoData()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        handleSelectionChange(val) {
            console.log(val)
            this.checkData = val
        },
        getSize() {
            this.queryMap.limit = val
            this.getTravelInfoData()
        },
        getCurrent() {
            this.queryMap.page = val
            this.getTravelInfoData()
        },
        saveTravelInfo() {
            debugger
            this.$refs['eForm'].validate(valid => {
                if (valid) {
                    if (this.travelInfoForm.id === 0) {
                        this.$http.post(`/travelInfo/addTravelInfo`, this.travelInfoForm).then(res => {
                            if (res.data === "success") {
                                this.$message.success("新增成功")
                                this.getTravelInfoData()
                                this.dialogFormVisible = false
                                this.travelInfoForm = {
                                    id: 0,
                                    empno: 0,
                                    departureTime: '',
                                    arrivalTime: '',
                                    day: 0,
                                    instruction: '',
                                    reimbursementTime: '',
                                    subsidy: 0,
                                    reimbursement: 0
                                }
                                this.$refs['eForm'].resetFields()
                            }
                        })
                    }
                    else {
                        this.$http.post(`/travelInfo/updateTravelInfo`, this.travelInfoForm).then(res => {
                            if (res.data === "success") {
                                this.$message.success("修改成功")
                                this.getTravelInfoData()
                                this.dialogFormVisible = false
                                this.travelInfoForm = {
                                    id: 0,
                                    empno: 0,
                                    departureTime: '',
                                    arrivalTime: '',
                                    day: 0,
                                    instruction: '',
                                    reimbursementTime: '',
                                    subsidy: 0,
                                    reimbursement: 0
                                }
                                this.$refs['eForm'].resetFields()
                            }
                        })
                    }
                }
                else {
                    console.log('error submit!!')
                    return false
                }
            })
        },

        resetForm() {
            this.dialogFormVisible = false
            this.travelInfoForm = {
                id: 0,
                empno: 0,
                departureTime: '',
                arrivalTime: '',
                day: 0,
                instruction: '',
                reimbursementTime: '',
                subsidy: 0,
                reimbursement: 0
            }

        },

        getTravelInfoData() {
            this.queryMap.empno = this.$store.getters.getUid
            this.$http.post("/travelInfo/travelInfoList", this.queryMap).then(res => {
                console.log(res.data.data)
                this.travelInfoData = res.data.data
                this.total = res.data.count
            })
        }

    },
    beforeCreate() {
    },

    created() {

    },

    beforeMount() {

    },

    mounted() {
        this.getTravelInfoData()
    },

    beforeUpdate() {

    },

    updated() {

    },

    beforeDestroy() {

    },
    destroyed() {

    },

    activated() {

    },
}


</script>

<style scoped>

</style>